<!DOCTYPE HTML>
<html lang="zxx">

<head>
    <title>登录页</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" >
    <meta name="keywords" content="Triple Forms Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />
    <script>
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <!-- Meta tag Keywords -->

    <!-- css files -->
    <link rel="stylesheet" href="css/loginStyle.css" type="text/css" media="all" />
    <link rel="stylesheet" href="css/self.css">
    <link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
</head>

<body>
<!--导航栏-->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand self-padding-first-border"><img src="./img/TimberBlog.svg" width="150px" height="30px"></img></a>
    <button class="navbar-toggler" id="indexBtn" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <!--            主页-->
            <li class="nav-item">
                <a class="nav-link self-padding-other-border" href="index.html">
                    <i class="fa fa-home"></i>主页
                    <!--                    <span class="sr-only">(current)</span>-->
                </a>
            </li>
            <!--            分类-->
            <li class="nav-item">
                <a class="nav-link self-padding-other-border" href="type.html">
                    <i class="fa fa-folder-open"></i>分类
                </a>
            </li>
            <!--标签-->
            <li class="nav-item">
                <a class="nav-link self-padding-other-border" href="http://localhost:8088/demo/label.html">
                    <i class="fa fa-bookmark"></i>标签
                </a>
            </li>

            <!--            时间轴-->
            <li class="nav-item">
                <a class="nav-link self-padding-other-border" href="timetable.html">
                    <i class="fa fa-calendar"></i>时间轴
                </a>
            </li>
        </ul>
        <!--        搜索按钮-->
        <form class="form-inline my-2 my-lg-0  self-padding-search-border">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="selfInf.html">
                    <i class="fa fa-user"></i>个人中心
                </a>
            </li>
            <!--编写文章-->
            <li class="nav-item">
                <a class="nav-link self-padding-other-border" href="editor.html">
                    <i class="fa fa-keyboard-o"></i>文章编辑
                </a>
            </li>
        </ul>
    </div>
</nav>
<!--主页面-->
<div class="main-bg self-header-border" id="mian">
    <!-- TimberBlog标识 -->
    <img align="middle" src="./img/TimberBlog.svg" style="display: block;margin:auto;padding-top:2em;"></img>
    <!-- title -->
    <div class="sub-main-w3">
        <div class="vertical-tab">
            <div id="section1" class="section-w3ls">
                <input type="radio" name="sections" id="option1" >
                <label for="option1" class="icon-left-w3pvt"><span class="fa fa-user-circle" aria-hidden="true"></span>登录</label>
                <article>
                    <form action="#" method="post" id="LoginForm">
                        <h3 class="legend">账号登录</h3>
                        <br>
                        <div class="input">
                            <span class="fa fa-envelope-o" aria-hidden="true"></span>
                            <input type="email" v-model="logindata.email" placeholder="邮箱" name="userAccount" required />
                        </div>
                        <br>
                        <div class="input">
                            <span class="fa fa-key" aria-hidden="true"></span>
                            <input type="password" v-model="logindata.password" placeholder="密码" name="userPwd" required />
                        </div>
                        <button type="l" id="loginBtn" class="button submit">登 录</button>
<!--                        <a href="#" class="bottom-text-w3ls">忘记密码?</a>-->
                        <div style="padding-bottom:27px;"></div>
                    </form>
                </article>
            </div>
            <div id="section2" class="section-w3ls">
                <input type="radio" name="sections" id="option2" checked>
                <label for="option2" class="icon-left-w3pvt"><span class="fa fa-pencil-square" aria-hidden="true"></span>注册</label>
                <article>
                    <form action="#" method="post" id="regForm">
                        <h3 class="legend">注册帐户</h3>
                        <div class="input">
                            <span class="fa fa-user-o" aria-hidden="true"></span>
                            <input type="text" v-model="registerdata.name"  placeholder="用户名" name="userAccount" required />
                        </div>
                        <div class="input">
                            <span class="fa fa-key" aria-hidden="true"></span>
                            <input type="password" v-model="registerdata.password"  placeholder="密码" name="userPwd" required />
                        </div>
                        <div class="input">
                            <span class="fa fa-key" aria-hidden="true"></span>
                            <input type="password" v-model="registerdata.confirmPassword"  placeholder="确认密码" name="confirmPwd" required />
                        </div>
                        <button type="submit" class="button submit" id="btnReg">注 册</button>
                        <div style="padding-bottom:8px;"></div>
                    </form>
                </article>
            </div>
            <div id="section3" class="section-w3ls">
                <input type="radio" name="sections" id="option3">
                <label for="option3" class="icon-left-w3pvt"><span class="fa fa-lock" aria-hidden="true"></span>忘记密码?</label>
                <article>
                    <form action="#" method="post">
                        <h3 class="legend last">重置密码</h3>
                        <p class="para-style">请在下面输入您的电子邮件地址，我们将给您发送一封带有说明的电子邮件。</p>
                        <p class="para-style-2"><strong>需要帮助?</strong>了解更多关于如何 <a href="#">#</a></p>
                        <div class="input">
                            <span class="fa fa-envelope-o" aria-hidden="true"></span>
                            <input type="email" v-model="forgetdata.email" placeholder="邮箱" name="email" required />
                        </div>
                        <button type="submit" class="button submit last-btn" id="emailBtn">提交</button>
                        <div style="padding-bottom:18px;"></div>
                    </form>
                </article>
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <br><br><br>
</div>

<!--底部-->
<footer>
    <div class="container">
        <br>
        <h6 class="text-center" style="color:white;font-family:'Microsoft YaHei UI'">Copyright © 2021 By TimberBlog</h6>
    </div>
</footer>
</body>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
    //页面加载完毕，执行的函数
    jQuery(function () {
        // 找到btnReg的控件，给其添加一个点击事件
        jQuery("#loginBtn").click(function () {
            //现在要获取控件的数据
            let form = jQuery("#LoginForm").serialize();     //这个语句能获取form里面的所有有名序列（即name属性）
            let account = jQuery("#userAccount").val();

            // let str =JSON.stringify(account);
            // sessionStorage.setItem("info",str);

            //向服务器法请求，并相应结果
            jQuery.post("user/Account_Login",form,function (rst) {          //rst表示服务器返回的数据
                if(rst){
                    alert("登录成功！");
                    // let id = '';
                    // id += `${rst.userId}`;
                    // alert(id);
                    location.href="index.html";
                }else{
                    alert("登录失败！");
                }
            });     //以post向后台发送数据
        });
    })
</script>
<script>
    //页面加载完毕，执行的函数
    jQuery(function () {
        // 找到btnReg的控件，给其添加一个点击事件
        jQuery("#btnReg").click(function () {
            //现在要获取控件的数据
            let form = jQuery("#regForm").serialize();     //这个语句能获取form里面的所有有名序列（即name属性）
            //向服务器法请求，并相应结果
            jQuery.post("user/Account_reg",form,function (rst) {          //rst表示服务器返回的数据
                alert("注册成功！");
                location.href="login.html";
                // if(rst>0){
                //     alert("注册成功！");
                // }else{
                //     alert("注册失败！");
                // }
            });     //以post向后台发送数据
        });
    })
</script>
</html>
